<!--法律政策库-->
<template>
  <div class="legal-policyLibrary-container">
    <HeaderIndex :isReturnText="false" :isClose="false" :isService="true" />
    <div class="theSearchArea">
      <van-search v-model="searchValue" placeholder="搜索文件名称/发布机关" @search="search" />
      <van-dropdown-menu active-color="#1989fa">
        <!--效力级别-->
        <van-dropdown-item title="效力级别" class="popsUpADropDownMenu" ref="potencyLevel" title-class="potencyLevel">
          <div class="multiSelect" @click="potencyLevel($event, 'potencyLevel')">
            <div class="item" v-for="(item, index) in potencyLevelData" :key="index">
              <span :class="[param.potencyLevel === item ? 'choose' : '']">{{ item }}</span>
            </div>
          </div>
          <div class="btn">
            <van-button type="default" @click="onreset('potencyLevel')"> 重置</van-button>
            <van-button type="default" @click="onConfirm('potencyLevel')"> 确认</van-button>
          </div>
        </van-dropdown-item>
        <!--时效性-->
        <van-dropdown-item title="时效性" class="popsUpADropDownMenu" ref="timeliness" title-class="timeliness">
          <div class="multiSelect" @click="potencyLevel($event, 'timeliness')">
            <div class="item" v-for="(item, index) in timelinessData" :key="index">
              <span :class="[param.timeliness === item ? 'choose' : '']">{{ item }}</span>
            </div>
          </div>
          <div class="btn">
            <van-button type="default" @click="onreset('timeliness')"> 重置</van-button>
            <van-button type="default" @click="onConfirm('timeliness')"> 确认</van-button>
          </div>
        </van-dropdown-item>
        <!--发布开始日期-->
        <van-dropdown-item
          :title="releaseStart ? releaseStart : '发布开始日期'"
          ref="releaseStartDate"
          title-class="dateSelection"
        >
          <van-datetime-picker
            v-model="releaseStartDate"
            type="date"
            title="选择年月"
            :min-date="releaseStartMinDate"
            :max-date="releaseStartMaxDate"
            :formatter="formatter"
            :show-toolbar="false"
          />
          <div class="btn">
            <van-button type="default" @click="onreset('releaseStartDate')"> 重置</van-button>
            <van-button type="default" @click="onConfirm('releaseStartDate')"> 确认</van-button>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="—" :disabled="true" title-class="transverseLine"></van-dropdown-item>
        <!--发布结束始日期-->
        <van-dropdown-item
          :title="publicationEnd ? publicationEnd : '发布结束日期'"
          ref="publicationEndDate"
          title-class="dateSelection"
        >
          <van-datetime-picker
            v-model="publicationEndDate"
            type="date"
            title="选择年月"
            :min-date="publicationEndMinDate"
            :max-date="publicationEndMaxDate"
            :formatter="formatter"
            :show-toolbar="false"
          />
          <div class="btn">
            <van-button type="default" @click="onreset('publicationEndDate')"> 重置</van-button>
            <van-button type="default" @click="onConfirm('publicationEndDate')"> 确认</van-button>
          </div>
        </van-dropdown-item>
        <!--实施开始日期-->
        <van-dropdown-item
          :title="implementationStart ? implementationStart : '实施开始日期'"
          ref="implementationStartDate"
          title-class="dateSelection"
        >
          <van-datetime-picker
            v-model="implementationStartDate"
            type="date"
            title="选择年月"
            :min-date="implementationStartMinDate"
            :max-date="implementationStartMaxDate"
            :formatter="formatter"
            :show-toolbar="false"
          />
          <div class="btn">
            <van-button type="default" @click="onreset('implementationStartDate')"> 重置</van-button>
            <van-button type="default" @click="onConfirm('implementationStartDate')"> 确认</van-button>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="—" :disabled="true" title-class="transverseLine"></van-dropdown-item>
        <!--实施结束始日期-->
        <van-dropdown-item
          :title="implementationEnd ? implementationEnd : '实施结束日期'"
          ref="implementationEndDate"
          title-class="dateSelection"
        >
          <van-datetime-picker
            v-model="implementationEndDate"
            type="date"
            title="选择年月"
            :min-date="implementationEndMinDate"
            :max-date="implementationEndMaxDate"
            :formatter="formatter"
            :show-toolbar="false"
          />
          <div class="btn">
            <van-button type="default" @click="onreset('implementationEndDate')"> 重置</van-button>
            <van-button type="default" @click="onConfirm('implementationEndDate')"> 确认</van-button>
          </div>
        </van-dropdown-item>
        <!--专业主题-->
        <van-dropdown-item title="专业主题" class="popsUpADropDownMenu" ref="professionalTopic" title-class="professionalTopic">
          <div class="multiSelect" @click="potencyLevel($event, 'professionalTopic')">
            <div class="item" v-for="(item, index) in professionalTopicData" :key="index">
              <span :class="[professionalTopic.includes(item) ? 'choose' : '']">{{ item }}</span>
            </div>
          </div>
          <div class="btn">
            <van-button type="default" @click="onreset('professionalTopic')"> 重置</van-button>
            <van-button type="default" @click="onConfirm('professionalTopic')"> 确认</van-button>
          </div>
        </van-dropdown-item>
        <!--涉及职能部门-->
        <van-dropdown-item
          title="涉及职能部门"
          class="popsUpADropDownMenu"
          ref="functionalDepartment"
          title-class="functionalDepartment"
        >
          <div class="multiSelect" @click="potencyLevel($event, 'functionalDepartment')">
            <div class="item" v-for="(item, index) in functionalDepartmentData" :key="index">
              <span :class="[functionalDepartment.includes(item) ? 'choose' : '']">{{ item }}</span>
            </div>
          </div>
          <div class="btn">
            <van-button type="default" @click="onreset('functionalDepartment')"> 重置</van-button>
            <van-button type="default" @click="onConfirm('functionalDepartment')"> 确认</van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div class="theListOf">
      <van-list v-model="loadingList" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
        <div v-for="(item, index) in listData" :key="index" class="card" @click="particulars(item)">
          <div class="theTitle">{{ item.fileName }}</div>
          <div class="headings">
            <span>{{ item.issuedDept }}</span>
            <span>{{ item.issueNum }}</span>
            <span>{{ item.effectiveTime }} 实施</span>
            <span>{{ item.issuedTime }} 发布</span>
          </div>
          <div class="specializedSubject" v-show="item.specialSubject">
            <img src="@/assets/images/zhuti.png" alt="主题" />专业主题：{{ item.specialSubject }}
          </div>
          <div class="functionalDepartments" v-show="item.referFunctionalDept">
            <img src="@/assets/images/bumen.png" alt="部门" />涉及职能部门：{{ item.referFunctionalDept }}
          </div>
        </div>
      </van-list>
    </div>
    <div class="noData" v-if="loadingList === false && listData === null">
      <div class="bgImg"></div>
      <div class="title">暂无数据...</div>
    </div>
  </div>
</template>
<script>
import HeaderIndex from "@/components/header";
import { lawList, legalCertification } from "@/api";
import dayjs from "dayjs";
import {
  functionalDepartmentData,
  professionalTopicData,
  timelinessData,
  potencyLevelData,
} from "@/utils/robotOptionsConfiguration.js";
export default {
  name: "legalPolicyLibrary",
  components: {
    HeaderIndex,
  },
  data() {
    return {
      searchValue: "", //搜索值
      releaseStartMinDate: new Date(2000, 0, 1), //发布开始最小日期
      releaseStartMaxDate: new Date(2099, 0, 1), //发布开始最大日期
      releaseStartDate: new Date(), //发布开始默认日期
      releaseStart: null, //发布开始确认日期

      publicationEndMinDate: new Date(2000, 0, 1), //发布结束最小日期
      publicationEndMaxDate: new Date(2099, 0, 1), //发布结束最大日期
      publicationEndDate: new Date(), //发布结束默认日期
      publicationEnd: null, //发布结束确认日期

      implementationStartMinDate: new Date(2000, 0, 1), //实施开始最小日期
      implementationStartMaxDate: new Date(2099, 0, 1), //实施开始最大日期
      implementationStartDate: new Date(), //实施开始默认日期
      implementationStart: null, //实施开始确认日期

      implementationEndMinDate: new Date(2000, 0, 1), //实施结束最小日期
      implementationEndMaxDate: new Date(2099, 0, 1), //实施结束最大日期
      implementationEndDate: new Date(), //实施结束默认日期
      implementationEnd: null, //实施结束确认日期
      param: {
        page: 1, //默认页数
        limit: 10, //默认一页的数量
        fileName: null, //文件名称
        potencyLevel: null, //效率级别
        newIssuedDept: null, //发布机关
        issuedTime: null, //发布日期
        effectiveTime: null, //实施日期
        timeliness: null, //时效性
        select: null, //涉及职能部门
        specialSubject: null, //专业主题
        referFunctionalDept: null, //涉及职能部门:
      },
      listData: [], //列表数据
      functionalDepartmentData,//职能部门
      professionalTopicData, //专业主题
      timelinessData, //时效性
      potencyLevelData, //效力级别
      professionalTopic: [], //专业主题选择的选项
      functionalDepartment: [], //职能部门选择的选项
      loading: false, //加载状态
      loadingList: false, //上拉加载
      finished: false, //加载完成
    };
  },
  async created() {
    await legalCertification();
  },
  mounted() {
    this.search();
  },
  methods: {
    /**
     * 跳转详情
     */
    async particulars(item) {
      this.$router.push({ name: "particulars", query: { id: item.id } });
      /*const data = await particulars(id);
             MXCommon.openUrlPage(data.data.contextUrl);*/
    },
    /**
     * 上拉加载
     * @return {Promise<void>}
     */
    async onLoad() {
      this.param.page++;
      const data = await lawList(this.param);
      if (data?.data?.data !== null) {
        this.listData = this.listData.concat(data?.data?.data);
      }
      // 加载状态结束
      this.loadingList = false;
      // 数据全部加载完成
      if (this.listData.length >= data?.data.count) {
        this.finished = true;
      }
    },
    /**
     * 选项卡选择
     * @param $event 选择的dom
     * @param type 类型
     */
    potencyLevel($event, type) {
      const value = $event.srcElement.innerText; //选项值
      switch (type) {
        case "timeliness":
        case "potencyLevel":
          if (this.param[type] === value) {
            //当选项数组里面有当前数据
            this.param[type] = null;
          } else {
            //当选项数组里面无当前数据
            this.param[type] = value;
          }
          break;
        case "professionalTopic":
        case "functionalDepartment":
          if (this[type].includes(value)) {
            //当选项数组里面有当前数据
            const index = this[type].indexOf(value);
            this[type].splice(index, 1);
          } else {
            //当选项数组里面无当前数据
            this[type].push(value);
          }
          break;
      }
    },
    /**
     * 搜索文件
     */
    async search() {
      this.loading = true;
      this.param.page = 1;
      this.finished = false;
      //this.listData.splice(0, this.listData.length);
      this.param.fileName = this.searchValue;
      this.param.newIssuedDept = this.searchValue;
      const data = await lawList(this.param);
      this.loading = false;
      this.listData = data.data.data;
    },
    /**
     * 重置按钮
     */
    onreset(type) {
      switch (type) {
        case "timeliness":
        case "potencyLevel":
          //效力级别
          //时效性
          this.param[type] = null;
          break;
        case "professionalTopic":
        case "functionalDepartment":
          //专业主题
          //涉及职能部门
          this[type] = [];
          break;
        case "releaseStartDate":
        case "publicationEndDate":
          //发布开始确认日期
          //发布结束确认日期
          this.releaseStart = null;
          this.publicationEnd = null;
          this.param.issuedTime = null;
          break;
        case "implementationStartDate":
        case "implementationEndDate":
          //实施开始确认日期
          //实施结束确认日期
          this.implementationStart = null;
          this.implementationEnd = null;
          this.param.effectiveTime = null;
          break;
      }
      this.$refs[type].toggle();
    },
    /**
     * 确认按钮
     * @param type 选项卡类型
     */
    async onConfirm(type) {
      switch (type) {
        case "professionalTopic":
          //专业主题数据转换
          this.param.specialSubject = this.professionalTopic.join("、");
          break;
        case "functionalDepartment":
          //涉及职能部门数据转换
          this.param.referFunctionalDept = this.functionalDepartment.join("、");
          break;
        case "releaseStartDate":
          //发布开始日期
          this.releaseStart = dayjs(this[type]).format("YYYY-MM-DD");
          this.publicationEndMinDate = this[type];
          if (this.publicationEnd === null) {
            //发布结束确认日期为空
            this.publicationEnd = dayjs(this[type]).format("YYYY-MM-DD");
          }
          break;
        case "publicationEndDate":
          //发布结束日期
          this.publicationEnd = dayjs(this[type]).format("YYYY-MM-DD");
          this.releaseStartMaxDate = this[type];
          if (this.releaseStart === null) {
            //发布开始确认日期为空
            this.releaseStart = dayjs(this[type]).format("YYYY-MM-DD");
          }
          break;
        case "implementationStartDate":
          //实施开始日期
          this.implementationStart = dayjs(this[type]).format("YYYY-MM-DD");
          this.implementationEndMinDate = this[type];
          if (this.implementationEnd === null) {
            //实施布结束确认日期为空
            this.implementationEnd = dayjs(this[type]).format("YYYY-MM-DD");
          }
          break;
        case "implementationEndDate":
          //实施结束日期
          this.implementationEnd = dayjs(this[type]).format("YYYY-MM-DD");
          this.implementationStartMaxDate = this[type];
          if (this.implementationStart === null) {
            //实施开始确认日期为空
            this.implementationStart = dayjs(this[type]).format("YYYY-MM-DD");
          }
          break;
        default:
      }
      if (this.releaseStart !== null && this.publicationEnd !== null) {
        this.param.issuedTime = this.releaseStart + " - " + this.publicationEnd; //发布日期
      }
      if (this.implementationStart !== null && this.implementationEnd !== null) {
        this.param.effectiveTime = this.implementationStart + " - " + this.implementationEnd; //实施日期
      }
      this.$refs[type].toggle();
      this.search();
    },
    /**
     * 格式化时间选择器
     * @param type 类型
     * @param val 日期
     * @return {*|string}
     */
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type === "day") {
        return `${val}日`;
      }
      return val;
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/styles/legalPolicyLibrary";
</style>
